<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>i18n管理页面</title>
    <!-- 引入Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- 引入Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 引入Element Plus JS -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <!-- 引入Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .tabs {
            margin-bottom: 20px;
        }
        .form-item {
            margin-bottom: 20px;
        }
        .download-section {
            margin-top: 30px;
            padding: 20px;
            background-color: #f5f7fa;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <h1 class="header">i18n管理系统</h1>
            
            <el-tabs v-model="activeTab" class="tabs">
                <!-- 语言管理 -->
                <el-tab-pane label="语言管理" name="languages">
                    <el-card>
                        <template #header>
                            <div class="card-header">
                                <span>支持的语言</span>
                                <el-button type="primary" @click="showAddLanguageDialog = true">添加语言</el-button>
                            </div>
                        </template>
                        <el-table :data="languages" style="width: 100%">
                            <el-table-column prop="code" label="语言代码" width="120"></el-table-column>
                            <el-table-column prop="name" label="语言名称" width="180"></el-table-column>
                            <el-table-column prop="isActive" label="是否激活" width="120">
                                <template #default="scope">
                                    <el-switch v-model="scope.row.isActive" disabled></el-switch>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-tab-pane>
                
                <!-- 翻译管理 -->
                <el-tab-pane label="翻译管理" name="translations">
                    <el-card>
                        <template #header>
                            <div class="card-header">
                                <span>翻译内容</span>
                                <el-button type="primary" @click="showAddTranslationDialog = true">添加翻译</el-button>
                            </div>
                        </template>
                        <el-form :model="searchForm" label-width="80px" inline>
                            <el-form-item label="应用">
                                <el-input v-model="searchForm.app" placeholder="请输入应用名称"></el-input>
                            </el-form-item>
                            <el-form-item label="服务">
                                <el-input v-model="searchForm.server" placeholder="请输入服务名称"></el-input>
                            </el-form-item>
                            <el-form-item label="语言">
                                <el-select v-model="searchForm.language" placeholder="请选择语言">
                                    <el-option v-for="lang in languages" :key="lang.code" :label="lang.name" :value="lang.code"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="searchTranslations">搜索</el-button>
                                <el-button @click="resetSearch">重置</el-button>
                            </el-form-item>
                        </el-form>
                        <div style="margin-bottom: 10px;">
                    <el-button type="danger" @click="showBatchDeleteDialog = true" :disabled="selectedTranslations.length === 0">
                        批量删除
                    </el-button>
                </div>
                <el-table :data="translations" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="app" label="应用" width="120"></el-table-column>
                    <el-table-column prop="server" label="服务" width="150"></el-table-column>
                    <el-table-column prop="key" label="键" width="200"></el-table-column>
                    <el-table-column prop="language" label="语言" width="100"></el-table-column>
                    <el-table-column prop="value" label="值" min-width="200"></el-table-column>
                    <el-table-column label="操作" width="200">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="editTranslation(scope.row)">编辑</el-button>
                            <el-button type="danger" size="small" @click="showDeleteDialog(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                    </el-card>
                </el-tab-pane>
                
                <!-- 翻译下载 -->
                <el-tab-pane label="翻译下载" name="download">
                    <el-card>
                        <template #header>
                            <div class="card-header">
                                <span>下载翻译文件</span>
                            </div>
                        </template>
                        <div class="download-section">
                            <el-form :model="downloadForm" label-width="100px">
                                <el-form-item label="应用名称" class="form-item">
                                    <el-input v-model="downloadForm.app" placeholder="请输入应用名称" style="width: 300px;"></el-input>
                                </el-form-item>
                                <el-form-item label="语言" class="form-item">
                                    <el-select v-model="downloadForm.language" placeholder="请选择语言" style="width: 300px;">
                                        <el-option v-for="lang in languages" :key="lang.code" :label="lang.name" :value="lang.code"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="文件格式" class="form-item">
                                    <el-radio-group v-model="downloadForm.format" style="width: 300px;">
                                        <el-radio label="json">JSON</el-radio>
                                        <el-radio label="yaml">YAML</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="downloadTranslations" :disabled="!downloadForm.app || !downloadForm.language">下载</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-card>
                </el-tab-pane>
            </el-tabs>
        </div>
        
        <!-- 添加语言对话框 -->
        <el-dialog v-model="showAddLanguageDialog" title="添加语言" width="500px">
            <el-form :model="languageForm" label-width="80px">
                <el-form-item label="语言代码" prop="code">
                    <el-input v-model="languageForm.code" placeholder="例如: en, zh"></el-input>
                </el-form-item>
                <el-form-item label="语言名称" prop="name">
                    <el-input v-model="languageForm.name" placeholder="例如: English, 中文"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showAddLanguageDialog = false">取消</el-button>
                    <el-button type="primary" @click="addLanguage">确定</el-button>
                </span>
            </template>
        </el-dialog>
        
        <!-- 添加翻译对话框 -->
        <el-dialog v-model="showAddTranslationDialog" title="添加翻译" width="600px">
            <el-form :model="translationForm" label-width="80px">
                <el-form-item label="应用" prop="app">
                    <el-input v-model="translationForm.app" placeholder="请输入应用名称"></el-input>
                </el-form-item>
                <el-form-item label="服务" prop="server">
                    <el-input v-model="translationForm.server" placeholder="请输入服务名称"></el-input>
                </el-form-item>
                <el-form-item label="键" prop="key">
                    <el-input v-model="translationForm.key" placeholder="请输入翻译键"></el-input>
                </el-form-item>
                <el-form-item label="语言" prop="language">
                    <el-select v-model="translationForm.language" placeholder="请选择语言" disabled>
                        <el-option label="中文" value="zh"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="值" prop="value">
                    <el-input v-model="translationForm.value" type="textarea" :rows="4" placeholder="请输入翻译值"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showAddTranslationDialog = false">取消</el-button>
                    <el-button type="primary" @click="addTranslation">确定</el-button>
                </span>
            </template>
        </el-dialog>
        
        <!-- 编辑翻译对话框 -->
        <el-dialog v-model="showEditTranslationDialog" title="编辑翻译" width="600px">
            <el-form :model="editTranslationForm" label-width="80px">
                <el-form-item label="应用">
                    <el-input v-model="editTranslationForm.app" disabled></el-input>
                </el-form-item>
                <el-form-item label="服务">
                    <el-input v-model="editTranslationForm.server" disabled></el-input>
                </el-form-item>
                <el-form-item label="键">
                    <el-input v-model="editTranslationForm.key" disabled></el-input>
                </el-form-item>
                <el-form-item label="语言">
                    <el-select v-model="editTranslationForm.language" disabled>
                        <el-option v-for="lang in languages" :key="lang.code" :label="lang.name" :value="lang.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="值">
                    <el-input v-model="editTranslationForm.value" type="textarea" :rows="4"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showEditTranslationDialog = false">取消</el-button>
                    <el-button type="primary" @click="updateTranslation">确定</el-button>
                </span>
            </template>
        </el-dialog>
        
        <!-- 删除翻译对话框 -->
        <el-dialog v-model="showDeleteDialogVisible" title="删除翻译" width="500px">
            <div>确定要删除翻译吗？</div>
            <div style="margin-top: 10px; color: #909399;">
                应用：{{ deleteForm.app }}<br>
                服务：{{ deleteForm.server }}<br>
                键：{{ deleteForm.key }}<br>
                语言：{{ deleteForm.language }}
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showDeleteDialogVisible = false">取消</el-button>
                    <el-button type="danger" @click="deleteTranslation">确定删除</el-button>
                </span>
            </template>
        </el-dialog>
        
        <!-- 批量删除翻译对话框 -->
        <el-dialog v-model="showBatchDeleteDialog" title="批量删除翻译" width="500px">
            <div>确定要删除选中的 {{ selectedTranslations.length }} 条翻译吗？</div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showBatchDeleteDialog = false">取消</el-button>
                    <el-button type="danger" @click="batchDeleteTranslations">确定删除</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    
    <script>
        const { createApp, ref, reactive, onMounted } = Vue;
        const { ElMessage } = ElementPlus;
        
        const app = createApp({
            setup() {
                // 标签页
                const activeTab = ref('languages');
                
                // 语言列表
                const languages = ref([]);
                // 添加语言对话框
                const showAddLanguageDialog = ref(false);
                const languageForm = reactive({
                    code: '',
                    name: ''
                });
                
                // 翻译列表
                const translations = ref([]);
                // 添加翻译对话框
                const showAddTranslationDialog = ref(false);
                const translationForm = reactive({
                    app: '',
                    server: '',
                    key: '',
                    language: 'zh',
                    value: ''
                });
                // 编辑翻译对话框
                const showEditTranslationDialog = ref(false);
                const editTranslationForm = reactive({
                    app: '',
                    server: '',
                    key: '',
                    language: '',
                    value: ''
                });
                // 删除翻译对话框
                const showDeleteDialogVisible = ref(false);
                const deleteForm = reactive({
                    app: '',
                    server: '',
                    key: '',
                    language: ''
                });
                // 批量删除翻译对话框
                const showBatchDeleteDialog = ref(false);
                const selectedTranslations = ref([]);
                
                // 搜索表单
                const searchForm = reactive({
                    app: '',
                    server: '',
                    language: ''
                });
                
                // 下载表单
                const downloadForm = reactive({
                    app: '',
                    language: '',
                    format: 'json'
                });
                
                // 获取支持的语言
                const getLanguages = () => {
                    axios.get('/test-gin/i18n/languages')
                        .then(response => {
                            languages.value = response.data.languages;
                        })
                        .catch(error => {
                            ElMessage.error('获取语言列表失败: ' + error.message);
                        });
                };
                
                // 添加语言
                const addLanguage = () => {
                    if (!languageForm.code || !languageForm.name) {
                        ElMessage.warning('请填写完整的语言信息');
                        return;
                    }
                    
                    axios.post('/test-gin/i18n/language', languageForm)
                        .then(response => {
                            ElMessage.success('语言添加成功');
                            showAddLanguageDialog.value = false;
                            // 重置表单
                            languageForm.code = '';
                            languageForm.name = '';
                            // 刷新语言列表
                            getLanguages();
                        })
                        .catch(error => {
                            ElMessage.error('添加语言失败: ' + error.message);
                        });
                };
                
                // 搜索翻译
                const searchTranslations = () => {
                    axios.get('/test-gin/i18n/translations/search', {
                        params: {
                            app: searchForm.app,
                            server: searchForm.server,
                            language: searchForm.language
                        }
                    })
                    .then(response => {
                        translations.value = response.data.translations;
                    })
                    .catch(error => {
                        ElMessage.error('搜索翻译失败: ' + error.message);
                    });
                };
                
                // 重置搜索
                const resetSearch = () => {
                    searchForm.app = '';
                    searchForm.server = '';
                    searchForm.language = '';
                    getTranslations();
                };
                
                // 获取翻译列表
                const getTranslations = () => {
                    axios.get('/test-gin/i18n/translations')
                        .then(response => {
                            translations.value = response.data.translations;
                        })
                        .catch(error => {
                            ElMessage.error('获取翻译列表失败: ' + error.message);
                        });
                };
                
                // 添加翻译
                const addTranslation = () => {
                    if (!translationForm.app || !translationForm.server || !translationForm.key || !translationForm.language || !translationForm.value) {
                        ElMessage.warning('请填写完整的翻译信息');
                        return;
                    }
                    
                    axios.post('/test-gin/i18n/translation', translationForm)
                        .then(response => {
                            ElMessage.success('翻译添加成功');
                            showAddTranslationDialog.value = false;
                            // 重置表单
                            translationForm.app = '';
                            translationForm.server = '';
                            translationForm.key = '';
                            translationForm.language = '';
                            translationForm.value = '';
                            // 刷新翻译列表
                            getTranslations();
                        })
                        .catch(error => {
                            ElMessage.error('添加翻译失败: ' + error.message);
                        });
                };
                
                // 编辑翻译
                const editTranslation = (row) => {
                    Object.assign(editTranslationForm, row);
                    showEditTranslationDialog.value = true;
                };
                
                // 更新翻译
                const updateTranslation = () => {
                    if (!editTranslationForm.value) {
                        ElMessage.warning('请填写翻译值');
                        return;
                    }
                    
                    // 这里可以添加更新翻译的逻辑
                    axios.post('/test-gin/i18n/translation', editTranslationForm)
                        .then(response => {
                            ElMessage.success('翻译更新成功');
                            showEditTranslationDialog.value = false;
                            // 刷新翻译列表
                            getTranslations();
                        })
                        .catch(error => {
                            ElMessage.error('更新翻译失败: ' + error.message);
                        });
                };
                
                // 显示删除对话框
                const showDeleteDialog = (row) => {
                    deleteForm.app = row.app;
                    deleteForm.server = row.server;
                    deleteForm.key = row.key;
                    deleteForm.language = row.language;
                    showDeleteDialogVisible.value = true;
                };
                
                // 删除翻译
                const deleteTranslation = () => {
                    axios.delete('/test-gin/i18n/translation', {
                        data: deleteForm
                    })
                    .then(response => {
                        ElMessage.success('翻译删除成功');
                        showDeleteDialogVisible.value = false;
                        // 刷新翻译列表
                        getTranslations();
                    })
                    .catch(error => {
                        ElMessage.error('删除翻译失败: ' + error.message);
                    });
                };
                
                // 处理表格行选择变化
                const handleSelectionChange = (selection) => {
                    selectedTranslations.value = selection;
                };
                
                // 批量删除翻译
                const batchDeleteTranslations = () => {
                    if (selectedTranslations.value.length === 0) {
                        ElMessage.warning('请选择要删除的翻译');
                        return;
                    }
                    
                    axios.delete('/test-gin/i18n/translations/batch', {
                        data: { translations: selectedTranslations.value }
                    })
                    .then(response => {
                        ElMessage.success('批量删除成功');
                        showBatchDeleteDialog.value = false;
                        // 刷新翻译列表
                        getTranslations();
                        // 清空选择
                        selectedTranslations.value = [];
                    })
                    .catch(error => {
                        ElMessage.error('批量删除失败: ' + error.message);
                    });
                };
                
                // 下载翻译
                const downloadTranslations = () => {
                    if (!downloadForm.app || !downloadForm.language) {
                        ElMessage.warning('请选择应用和语言');
                        return;
                    }
                    
                    const url = `/test-gin/i18n/download/${downloadForm.app}/${downloadForm.language}?format=${downloadForm.format}`;
                    window.open(url, '_blank');
                };
                
                // 初始化
                onMounted(() => {
                    getLanguages();
                    getTranslations();
                });
                
                return {
                    activeTab,
                    languages,
                    showAddLanguageDialog,
                    languageForm,
                    addLanguage,
                    translations,
                    showAddTranslationDialog,
                    translationForm,
                    addTranslation,
                    showEditTranslationDialog,
                    editTranslationForm,
                    editTranslation,
                    updateTranslation,
                    searchForm,
                    searchTranslations,
                    resetSearch,
                    downloadForm,
                    downloadTranslations,
                    showDeleteDialogVisible,
                    deleteForm,
                    showDeleteDialog,
                    deleteTranslation,
                    showBatchDeleteDialog,
                    selectedTranslations,
                    handleSelectionChange,
                    batchDeleteTranslations
                };
            }
        });
        
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>